<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '请选择',
  },
  list: {
    type: Array,
    default: () => [],
  },
  valueKey: {
    type: String,
    default: 'value',
  },
  labelKey: {
    type: String,
    default: 'name',
  },
})
const emits = defineEmits(['update:modelValue'])
const value = defineModel()
const pickerRef = ref()
const { title, list, valueKey, labelKey } = toRefs(props)
const selectLabel = computed(() => {
  return list.value.find((item) => item[props.valueKey] === value.value)?.[props.labelKey] || ''
})
function handleOpen() {
  pickerRef.value.open(value.value)
}
function handleChangeValue(val) {
  emits('update:modelValue', val)
}
</script>

<template>
  <custom-wd-input v-model="selectLabel" v-bind="$attrs" readonly @click="handleOpen">
    <template #suffix>
      <wd-icon name="chevron-down" color="#909193" />
    </template>
  </custom-wd-input>
  <single-selection-picker
    ref="pickerRef"
    :value-key="valueKey"
    :label-key="labelKey"
    :title="title"
    :list="list"
    @change="handleChangeValue"
  />
</template>

<style scoped lang="scss"></style>
